<template>
  <div>
    <div class="userM">用户管理</div>
    <div class="filter-container">
      <el-button class="lbtn" style="margin-left: 10px"  @click="createNewUser">新建</el-button>
      <el-input size="mini" class="lbtn" style="width: 200px;" placeholder="按关键字搜索" @keyup.enter.native="keywordSearch(tempFilterOptions.enterChecked)" v-model="tempFilterOptions.name" />
      <el-button class="rbtn" @click="cancel">撤销</el-button>
    </div>
    <el-table
      :data="tempFilterOptions.enterChecked? getMemberList : memberList"
      style="width: 100%">
      <el-table-column  label="姓名" width="120" align="center">
        <template slot-scope="scope">
          <el-checkbox  :checked="scope.row.checked"  @change="isCheckedChange(scope.row)"></el-checkbox>
          <span style="margin-left: 10px">{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="年龄" width="120" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.age }}</span>
        </template>
      </el-table-column>
      <el-table-column label="性别" width="120" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.sex }}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话" width="120" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" width="450" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center" fixed="right">
        <template slot-scope="scope" class="tab-btn">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button class="lbtn" @click="batchDelete">批量删除</el-button>
    <!-- 新建用户弹出框 -->
    <el-dialog title="新建/编辑弹窗" :visible.sync="dialogAddVisible">
      <el-form ref="formAddCompanyMember"  label-width="80px" v-model="requestAddMember">
        <el-form-item label="姓名" class="dialog-form-item"  >
          <el-input size="mini" style="width: 200px;" type="text" v-model="requestAddMember.u_name"/>
        </el-form-item>
        <el-form-item label="性别" class="dialog-form-item" >
          <el-select  placeholder="请选择用户性别" v-model="requestAddMember.u_sex">
            <el-option value="男">男</el-option>
            <el-option value="女">女</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" class="dialog-form-item" >
          <el-input style="width: 200px;" type="text" v-model="requestAddMember.u_phone"  />
        </el-form-item>
        <!-- 地址下拉框 -->
        <el-form-item label="详细地址" class="dialog-form-item" >
          <el-select style="width: 100px;" placeholder="请选择省" value="" v-model="u_addressProvince">
            <el-option value="广东省">广东省</el-option>
          </el-select>
          <el-select style="width: 100px;" placeholder="请选择市" value="" v-model="u_addressCity">
            <el-option value="广州市">广州市</el-option>
          </el-select>
          <el-select style="width: 100px;" placeholder="请选择区" value="" v-model="u_addressArea">
            <el-option value="番禺区">番禺区</el-option>
            <el-option value="海珠区">海珠区</el-option>
            <el-option value="天河区">天河区</el-option>
          </el-select>
          <el-input style="width: 200px;" type="text" v-model="u_addressDetial" />
          <span v-model="requestAddMember.u_address=u_addressProvince+u_addressCity+u_addressArea+u_addressDetial"></span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="margin-right: 20px;margin-top: 0;">
        <el-button  @click.native="closeDialogMemberAdd">取消</el-button>
        <el-button  type="primary" @click.native="onMemberAdd">保存</el-button>
      </div>
    </el-dialog>
    <!-- 弹出编辑窗口 -->
    <el-dialog title="新建/编辑弹窗" :visible.sync="dialogEditVisible">
      <el-form ref="formAddCompanyMember"  label-width="80px" v-model="requestEditMember">
        <el-form-item label="姓名" class="dialog-form-item"  >
          <el-input  type="text" v-model="requestEditMember.u_name"/>
        </el-form-item>
        <el-form-item label="性别" class="dialog-form-item" >
          <el-select  placeholder="请选择用户性别" v-model="requestEditMember.u_sex">
            <el-option value="">男</el-option>
            <el-option value="">女</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" class="dialog-form-item" >
          <el-input  type="text" v-model="requestEditMember.u_phone"  />
        </el-form-item>
        <!-- 地址下拉框 -->
        <el-form-item label="详细地址" class="dialog-form-item" >
          <el-select placeholder="请选择省" value="" v-model="requestEditMember.u_address">
            <el-option value="">广东省</el-option>
          </el-select>
          <el-select placeholder="请选择市" value="" v-model="requestEditMember.u_address">
            <el-option value="">广州市</el-option>
          </el-select>
          <el-select placeholder="请选择区" value="" v-model="requestEditMember.u_address">
            <el-option value="">番禺区</el-option>
            <el-option value="">海珠区</el-option>
            <el-option value="">天河区</el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div  slot="footer" class="dialog-footer" style="margin-right: 20px;margin-top: 0;">
        <el-button  @click.native="closeDialogMemberEdit">取消</el-button>
        <el-button  type="primary" @click.native="onMemberEdit">保存</el-button>
      </div>
    </el-dialog>
  </div>
  
</template>

<script>
  export default {
    name:"Home",
    data() {
      return {
        memberList: JSON.parse(localStorage.getItem("memberList")) || [], // 存放人员数据
        getMemberList:JSON.parse(localStorage.getItem("getMemberList")) || [],
        
        requestAddMember: {
          u_id:"",
          u_name: "",
          u_sex: "",
          u_phone: "",
          u_address:"",
          u_age:"18",
          u_checked:false
        },
        requestEditMember:{
          u_id:"",
          u_name: "",
          u_sex: "",
          u_phone: "",
          u_address:{province:"",city:"",area:""},
          u_age:"",
          u_checked:""
        },
        dialogAddVisible:false, // 新建弹窗
        dialogEditVisible:false, // 编辑弹窗
        tempFilterOptions:{
          id:"",
          name: "",
          sex: "",
          phone: "",
          address: "",
          age:"18",
          checked:false,
          enterChecked:false
        },
        u_addressProvince:"",
        u_addressCity:"",
        u_addressArea:"",
        u_addressDetial:"",
      }
    },
    methods: {
      // 点击编辑事件,弹出的窗口值为该行的值
      handleEdit(index) {
          // console.log(this.memberList[index].id)
          this.requestEditMember.u_id = this.memberList[index].id
          this.requestEditMember.u_name = this.memberList[index].name
          this.requestEditMember.u_address = this.memberList[index].address
          this.requestEditMember.u_phone = this.memberList[index].phone
          this.dialogEditVisible = true
      },
      // 点击删除事件，改行被删除
      handleDelete(row) {
        // console.log(row.id);
        let element = this.memberList.filter(element => element.id !== row.id );
        // console.log(element);
        localStorage.setItem("memberList",JSON.stringify(element))
        this.memberList = JSON.parse(localStorage.getItem("memberList"))
      },
      // 关闭新建窗口
      closeDialogMemberAdd(){
        this.dialogAddVisible = false
      },
      // 新成员被添加
      onMemberAdd(){
        this.requestAddMember.u_id = (Math.random() + new Date().getTime()).toString(32).slice(0,8) 
        let params = {
            name: this.requestAddMember.u_name,
            phone: this.requestAddMember.u_phone,
            sex: this.requestAddMember.u_sex,
            address: this.requestAddMember.u_address,
            id:this.requestAddMember.u_id,
            age:this.requestAddMember.u_age,
            checked:this.requestAddMember.u_checked
          }
        // let memberList = []
        this.memberList.push(params)
        localStorage.setItem("memberList",JSON.stringify(this.memberList))
        this.memberList = JSON.parse(localStorage.getItem("memberList"))
        this.dialogAddVisible = false

      },
      // 新建用户,弹出的窗口为空值
      createNewUser(){
        if (this.$refs.formAddCompanyMember !== undefined) this.$refs.formAddCompanyMember.resetFields()
        this.requestAddMember.u_name = undefined
        this.requestAddMember.u_phone = undefined
        this.requestAddMember.u_sex = undefined
        this.requestAddMember.u_address = undefined
        this.dialogAddVisible=true
      },
      // 关闭编辑用户窗口
      closeDialogMemberEdit(){
        this.dialogEditVisible = false
      },
      // 保存编辑窗口的数据
      onMemberEdit(){
        let i = 0
        let params = {
            name: this.requestEditMember.u_name,
            phone: this.requestEditMember.u_phone,
            sex: this.requestEditMember.u_sex,
            address: this.requestEditMember.u_address,
            id:this.requestEditMember.u_id,
            age:this.requestEditMember.u_age,
            checked:this.requestEditMember.u_checked
        }
          this.memberList.forEach((item)=>{
            i++
            if(item.id == params.id){
              this.memberList[i-1] = params;
              // console.log(this.memberList[i-1]);
              // console.log(this.memberList);
              localStorage.setItem("memberList",JSON.stringify(this.memberList))
              return
            }
          })
        
        this.memberList = JSON.parse(localStorage.getItem("memberList"))
        this.dialogEditVisible = false
      },
      //按关键字搜索用户
      keywordSearch(checked){
        this.tempFilterOptions.enterChecked = true
        this.memberList.forEach((item)=>{
          if(item.name == this.tempFilterOptions.name){
            // this.tempFilterOptions = item
            this.getMemberList.push(item)
          }
        })
        localStorage.setItem("getMemberList",JSON.stringify(this.getMemberList))
        this.getMemberList = JSON.parse(localStorage.getItem("getMemberList"))
        this.$nextTick(()=>{
          this.tempFilterOptions.enterChecked = false
        })
      },
      // 批量删除
      batchDelete(){
        let item = this.memberList.filter((item)=>item.checked == false)
        localStorage.setItem("memberList",JSON.stringify(item))
        this.memberList = JSON.parse(localStorage.getItem("memberList"))
      },
      // 修改复选框的isChecked
      isCheckedChange(row){
        row.checked = !row.checked
        // console.log(row.checked);
        let i =0
        let params = {
            name: row.name,
            phone: row.phone,
            sex: row.sex,
            address: row.address,
            id:row.id,
            age:row.age,
            checked:row.checked
        }
        this.memberList.forEach((item)=>{
            i++
            if(item.id == params.id){
              this.memberList[i-1] = params;
              // console.log(this.memberList[i-1]);
              // console.log(this.memberList);
              localStorage.setItem("memberList",JSON.stringify(this.memberList))
              return
            }
          })
          this.memberList = JSON.parse(localStorage.getItem("memberList"))
      },
      // 撤销
      cancel(){}
    }
  }
</script>

<style scoped>
.userM {
  text-align: center;
  width: 100%;
  height: 100px;
  background-color: rgb(187, 185, 185);
  font-size: 50px;
}
.lbtn {
  float: left;
}
.rbtn {
  float: right;
}
</style>